<template>
  <div class="main" :style="style">
    <div class="top">
      <div class="time">{{ currentTime }}</div>
    </div>
    <div class="second">
      <div class="title">南通500kV变检智能库房管理平台</div>
      <div class="box">
        <div class="item" @click="goBorrow">
          <div>
            <img
              :src="require('../../assets/borrow.png')"
              alt=""
              style="width: 60px; height: 60px"
            />
          </div>
          <div>借用</div>
        </div>
        <div class="item" @click="goReturn">
          <div>
            <img
              :src="require('../../assets/back.png')"
              alt=""
              style="width: 60px; height: 60px"
            />
          </div>
          <div>归还</div>
        </div>
      </div>
    </div>
    <div class="remark">国网江苏省电力有限公司南通供电分公司</div>
  </div>
</template>

<script>
import { isSkip } from "@/common/api";
export default {
  name: "Main",
  props: {},
  components: {},
  data() {
    return {
      bgStyle: require("@/assets/backgd.png"),
      currentTime: "",
      timer: null,
    };
  },
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        backgroundSize: "cover", // 背景图片大小自适应
        backgroundPosition: "center", // 背景图片居中显示
      };
    },
  },
  created() {},
  mounted() {
    this.updateClock();
    this.timer = setInterval(this.updateClock, 1000);
    localStorage.setItem("room", this.$route.query.room);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    goBorrow() {
      isSkip().then((res) => {
        if (res.success && res.data) {
          this.$confirm("检测到有未完成的流程, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$router.replace(`/borrow?type=1`);
            })
            .catch(() => {
              this.$router.replace(`/borrow`);
            });
        } else {
          this.$router.replace(`/borrow`);
        }
      });
    },
    goReturn() {
      this.$router.replace(`/return`);
    },
    updateClock() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>


<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;

  .top {
    height: 60px;
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .logoImg {
      width: 182px;
      height: 54px;
    }
    .time {
      color: #009191;
      font-size: 24px;
      font-weight: bold;
    }
  }
  .second {
    flex: 1;
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      color: #009191;
      font-size: 50px;
      font-weight: bold;
    }
    .box {
      margin-top: 12vh;
      display: flex;
      gap: 120px;
      .item {
        width: 180px;
        height: 180px;
        background-color: #249087;
        border-radius: 12px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        cursor: pointer;
      }
      .item:hover {
        transform: scale(1.1); /* 缩放效果，使元素看起来被按下去 */
      }
    }
  }
  .remark {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 8vh;
    color: #009191;
    font-size: 20px;
    font-weight: 500;
  }
}
</style>
